<template>
  <view class="container">
    <view class="header">
      <view class="user-info">
        <view class="avatar"></view>
        <text>{{ phoneNumber }}</text>
      </view>
    </view>
    <view class="menu">
      <view class="menu-item" @click="goToProfile">
        <img src="https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize" alt="">
        <text>个人资料</text>
      </view>
      <view class="menu-item" @click="goToNotifications">
        <img src="https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize" alt="">
        <text>打卡记录</text>
      </view>
      <view class="menu-item" @click="goParents">
        <img src="https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize" alt="">
        <text>家属关联</text>
      </view>
      <view class="menu-item" @click="goToPoints">
        <img src="https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize" alt="">
        <text>我的积分</text>
      </view>
      <view class="menu-item" @click="goToPrivacy">
        <img src="https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize" alt="">
        <text>隐私政策</text>
      </view>
      <view class="menu-item" @click="logout">
        <img src="https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize" alt="">
        <text>退出登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '用户名',
      phoneNumber: '135****6543'
    };
  },
  methods: {
    goToProfile() {
      uni.navigateTo({
        url: '/pages/profile/profile'
      });
    },
    goToNotifications() {
      uni.navigateTo({
        url: '/pages/checkInRecords/checkInRecords'
      });
    },
    goParents() {
      uni.navigateTo({
        url: '/pages/checkInRecords/checkInRecords'
      });
    },
    goToPoints() {
      uni.navigateTo({
        url: '/pages/points/points'
      });
    },
    goToPrivacy() {
      uni.navigateTo({
        url: '/pages/privacy/privacy'
      });
    },
    logout() {
      uni.navigateTo({
        url: '/pages/logout/logout'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40rpx 0;
  font-size: 64rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  background-color: #a3c4ff;
  border-radius: 50%;
  margin-right: 20rpx;
}

.menu {
  width: 90%;
  flex-grow: 1;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 28rpx 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;

  img {
    width: 70rpx;
    margin-right: 120rpx;
  }
  text {
    margin: 0 auto;
  }
  margin-bottom: 20rpx;
}

.menu-item text {
  font-size: 64rpx;
  color: #333;
}
</style>